import { MainLayout } from '@/components/layout/main-layout'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { ArrowLeft, Clock, Wrench } from 'lucide-react'
import Link from 'next/link'

interface ComingSoonPageProps {
  title: string
  description: string
  features?: string[]
}

export function ComingSoonPage({ title, description, features }: ComingSoonPageProps) {
  return (
    <MainLayout>
      <div className="space-y-6">
        {/* 页面标题 */}
        <div className="flex items-center space-x-4">
          <Link href="/">
            <Button variant="ghost" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <h1 className="text-2xl font-bold text-gray-900">{title}</h1>
            <p className="text-gray-600">{description}</p>
          </div>
        </div>

        {/* 主要内容 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Wrench className="h-5 w-5 mr-2 text-blue-600" />
              功能开发中
            </CardTitle>
            <CardDescription>
              此功能正在积极开发中，敬请期待！
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* 预计功能 */}
            {features && features.length > 0 && (
              <div>
                <h3 className="text-lg font-medium text-gray-900 mb-4">预计功能</h3>
                <div className="grid gap-3">
                  {features.map((feature, index) => (
                    <div key={index} className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
                      <Clock className="h-4 w-4 text-blue-600" />
                      <span className="text-gray-700">{feature}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* 返回首页 */}
            <div className="text-center">
              <Link href="/">
                <Button>
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  返回工作台
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    </MainLayout>
  )
}